<template>
  <div class="container" style="padding-bottom: 2rem;height: 26rem">
    <div style="overflow-y: auto;height: 100%">
    <textarea
      class="input"
      placeholder="说出你的想法吧..."
      v-model="content"
    ></textarea>
    <div v-if="!videoList.length" class="img-upload">
      <label class="upload-btn" for="uploads">
        <img src="@/assets/相机.png" alt="" />
        <input
          type="file"
          id="uploads"
          @change="selectImg"
          style="position:absolute; clip:rect(0 0 0 0);"
          accept="video/*"
        />
      </label>
    </div>
    <div v-else class="video-list">
      <img
        @click="
          videoList = [];
          formdata1 = {};
        "
        src="@/assets/video-close.png"
        alt=""
      />
      <video
        v-for="(item, index) in videoList"
        class="video"
        :src="item"
        :key="index"
        controls
      ></video>
    </div>
    <div class="btn-hub">
      <div @click="chooseCategory()" class="btn-cell with-grey-bottom-border">
        <div class="left">
          <img src="@/assets/发视频-assets/category.png" alt="" />
          <span>选择分类</span>
          <span style="margin-left:100px;">{{
            this.categoryObj.dynamicName
          }}</span>
        </div>
        <div class="right"></div>
      </div>
      <div
        @click="$router.push('/category?action=relate')"
        class="btn-cell with-grey-bottom-border"
      >
        <div class="left">
          <img src="@/assets/kll/guanlian.jpg" alt="" />
          <span>关联服务</span>
        </div>
        <div class="right"></div>
      </div>
    </div>
    <div v-if="relatedGood" class="related-good">
      <div class="img">
        <img :src="relatedGood.commodity_img[0]" alt="" />
      </div>
      <div class="good-name">{{ relatedGood.name }}</div>
      <div @click="relatedGood = null" class="close-btn">
        <img src="@/assets/kll/guanbi.jpg" alt="" />
      </div>
    </div>
    <div
      class="bottom-btn"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
    >
      <button class="cancel" @click="back" :style="{background: subColor}">取消</button>
      <button class="send" @click="send" :style="{background: mainColor}">发送</button>
    </div>
    <choose-category
      @classify="receiveId"
      v-show="sortBool"
      :sortCat="sortBool"
    ></choose-category>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/axios";
import { publishDynamic } from "@/api/dynamics";
import chooseCategory from "@/views/dynamics/choose-category.vue";
// import chooseLocation from '@/views/dynamics/choose-location.vue'
import { mapState, mapMutations } from "vuex";
import { fileUpload } from "@/api/file";
import { getGoodsDetail } from "@/api/mall";
export default {
  data() {
    return {
      content: "", //需要发布的内容
      video: "", //视频上传成功返回的视频路径
      videoList: [], //上传的视频列表
      formdata1: {}, //上传文件时通过formData携带视频文件
      sortBool: false, //控制动态分类的显示与隐藏
      categoryObj: {}, //动态分类组件传回的信息
      relatedGood: null
    };
  },
  computed: {
    ...mapState({
      isFullscreen: state => state.app.isFullscreen,
      dynamic_related_good: state => state.app.dynamic_related_good,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor
    })
  },
  watch: {
    dynamic_related_good: function(val) {
      if (val) {
        getGoodsDetail({
          id: val
        }).then(res => {
          if (res.status === 200) {
            this.relatedGood = res.data.data;
          }
        });
      }
    }
  },
  components: {
    chooseCategory //动态分类
    // chooseLocation
  },
  methods: {
    ...mapMutations(["dynamicInit", "setRelatedGood"]),
    //取消
    back() {
      window.history.go(-1);
    },
    //发送
    send() {
      //先上传视频
      fileUpload(this.formdata1).then(res => {
        if (res.status === 200) {
          publishDynamic({
            describe: this.content,
            type: 2,
            classify: this.categoryObj.classifyId,
            links: res.data.data.files,
            commodity_id: this.relatedGood ? this.relatedGood.id : undefined
          }).then(res => {
            //发送成功，跳转主页
            if (res.status === 200) {
              this.$dialog.toast({
                mes: "发布成功",
                timeout: 1500,
                icon: "success"
              });
              this.$router.replace("/dynamics");
            }
          });
        }
      });
    },
    //文件选择框
    selectImg(e) {
      //input（file）发生改变
      var file = e.target.files[0]; //拿到文件
      let formdata = new FormData(); // 创建FormData对象
      formdata.append("files", file); //将文件添加到FormData中
      this.formdata1 = formdata; //挂载formdata，方便调用
      var reader = new FileReader(); //创建读取文件对象
      var that = this;
      reader.readAsDataURL(file); //开始读取
      reader.onload = function() {
        //监听文件的加载
        that.videoList.push(this.result); //将返回的结果存储，方便调用
      };
    },
    //动态分类
    chooseCategory() {
      this.sortBool = true;
    },
    //接受数据
    receiveId(value) {
      this.categoryObj = value;
      this.sortBool = false;
    },
    //地理信息
    chooseLocation() {
      this.locationBool = true;
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.sortBool) {
      this.sortBool = false;
      next(false);
    } else if (!to.path.includes("category")) {
      this.content = "";
      this.video = "";
      this.videoList = [];
      this.formdata1 = {};
      this.sortBool = false;
      this.categoryObj = {};
      this.relatedGood = null;
      this.dynamicInit();
      next();
    } else {
      next();
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  background: #fff;
  padding-bottom: 1rem;
  padding: 0 3.2%;

  .input {
    width: 100%;
    height: 9.8rem;
    font-size: 0.64rem;
    padding: 0.92rem 0;
    border: none;
    outline: none;
    color: #444444;
  }
  .video-list {
    position: relative;
    // float: left;
    // height: 4.82rem;
    background: #000;
    width: 5rem;
    height: 8rem;
    img {
      position: absolute;
      right: -0.5rem;
      top: -0.5rem;
      width: 1rem;
      height: 1rem;
      background: #fff;
      border-radius: 50%;
    }
    .video {
      width: 100%;
      height: 100%;
    }
  }
  .img-upload {
    overflow: hidden;

    .upload-btn {
      // float: left;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 4.82rem;
      width: 5.24rem;
      background-color: #eeeeee;
      img {
        width: 2rem;
        height: 2rem;
      }
    }

    .videos {
      display: inline-block;
      height: 4.82rem;
      width: 5.24rem;
      background-color: #eeeeee;
    }
  }

  .btn-hub {
    border-top: 0.5px solid rgba(210, 210, 210, 0.4);
    margin-top: 0.84rem;

    .btn-cell {
      display: flex;
      justify-content: space-between;
      height: 1.84rem;
      line-height: 1.84rem;
      padding-left: 0.4rem;

      .left {
        font-size: 0.64rem;
        color: #666666;

        img {
          width: 0.72rem;
          vertical-align: middle;
          margin-right: 0.36rem;
        }
      }

      .right {
        width: 0.32rem;
        height: 1.84rem;
        background-image: url("../../assets/发视频-assets/next.png");
        background-size: 100% 0.52rem;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }
    }
  }
  .related-good {
    margin: 0.5rem;
    box-shadow: 0px 0px 0.6rem 0px rgba(183, 183, 183, 0.2);
    border-radius: 0.12rem;
    padding: 0.48rem;
    background: #fff;
    position: relative;
    display: flex;
    font-size: 0.6rem;
    color: #333;
    .img {
      width: 2rem;
      height: 2rem;
      background: #dfdfdf;
      border-radius: 0.12rem;
      margin-right: 0.48rem;
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
    .good-name {
      width: calc(100% - 2.48rem);
    }
    .close-btn {
      width: 0.68re;
      height: 0.68rem;
      .img {
        width: 100%;
        height: 100%;
      }
      position: absolute;
      right: 0.3rem;
      bottom: 0.24rem;
    }
  }
  .bottom-btn {
    line-height: 2rem;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;

    button {
      width: 50%;
      height: 2rem;
      padding: 0;
      font-size: 0.64rem;
      border: none;
    }

    .cancel {
      background: rgba(220, 220, 220, 1);
      color: #444444;
      vertical-align: bottom;
    }

    .send {
      background: rgba(0, 120, 255, 1);
      color: #fff;
      vertical-align: bottom;
    }
  }
}
</style>
